<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 头部 -->
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input 
            v-model="queryInfo.query"
          placeholder="请输入内容"
            @close="getShopList"
           clearable>
            <el-button slot="append" icon="el-icon-search" @click="getShopList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="getAdd">添加商品</el-button>
        </el-col>
      </el-row>
      <!-- 表格数据 -->
      <el-table :data="shopList" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="商品名称" prop="goods_name"></el-table-column>
        <el-table-column label="商品价格" prop="goods_price"></el-table-column>
        <el-table-column label="商品重量" prop="goods_weight"></el-table-column>
        <el-table-column label="创建时间" >
          <template  slot-scope="scope">
            {{scope.row.add_time|dateFormat}}
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="mobile">
          <!-- 编辑 删除 --> 
           <template slot-scope="scope">
          
 
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top-start"
              :enterable="false"
            >
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="showEditDialog(scope.row.goods_id)"
              ></el-button>
            </el-tooltip>
      
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top-start"
              :enterable="false"
            >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="deleteShop(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

       <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

          <!-- 添加商品对话框 -->
     


              <!-- 编辑对话框 -->
    <el-dialog title="编辑信息" :visible.sync="setGoodsShow" width="40%">
      <!-- 编辑对话框 -->

      <el-form
        :model="setGoodsForm"
       
        ref="GoodsFormRef"
        label-width="80px"
      >
        <el-form-item label="商品名称" label-width="100px">
          <el-input v-model="setGoodsForm.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="价格" label-width="100px">
          <el-input v-model="setGoodsForm.goods_price"></el-input>
        </el-form-item>
        <el-form-item label="数量" label-width="100px">
          <el-input v-model="setGoodsForm.goods_number"></el-input>
        </el-form-item>
        <el-form-item label="重量" label-width="100px">
          <el-input v-model="setGoodsForm.goods_weight"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="setGoodsShow = false">取 消</el-button>
        <el-button type="primary" @click="setGoodsUser">确 定</el-button>
      </span>
    </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 5,
      },
      //商品列表
      shopList: [],
      //总页数
      total: 0,
      //商品默认数据
      setGoodsForm:{
        goods_name:'',
        goods_price:'',
        goods_number:'',
        goods_weight:100,
        goods_cat:''
      },
      //编辑框显示
      setGoodsShow:false

    }
  },
  created() {
    this.getShopList()
  },
  methods: {
    //获取商品数据
    async getShopList() {
      const { data: res } = await this.$http.get('goods', {
        params: this.queryInfo,
      })
      this.shopList = res.data.goods
      console.log( this.shopList);
      this.total = res.data.total
    },
    
    //每页多少个
    handleSizeChange(newsize) {
      this.queryInfo.pagesize = newsize
      this.getShopList()
    },
    //页码
    handleCurrentChange(newpage) {
      this.queryInfo.pagenum = newpage
       this.getShopList()
    },
    //展示编辑对话框和获取原来的数据
   async showEditDialog(id){
     
          const {data:res}=await this.$http.get('goods/'+id)
          this.setGoodsForm=res.data
        this.setGoodsShow=true
    },
    //点击确定修改
    setGoodsUser(){
      this.$refs.GoodsFormRef.validate(async(val)=>{
        if(!val)return 

         const {data:res}=await this.$http.put('goods/'+this.setGoodsForm.goods_id,{

                goods_name:this.setGoodsForm.goods_name,
                goods_price:this.setGoodsForm.goods_price,
                goods_number:this.setGoodsForm.goods_number,
                goods_weight:this.setGoodsForm.goods_weight,
                goods_cat:this.setGoodsForm.goods_cat
         })
              console.log(this.setGoodsForm);
                this.getShopList()
                this.setGoodsShow=false
      })


    },
    //删除商品
    async deleteShop(id) {
     
      const confirmrsult = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((err) => err)
      //如果确认删除 confirm
      //取消 cancel
      console.log(confirmrsult)
      if (confirmrsult != 'confirm') return this.$message.info('已经取消删除')

      const { data: res } = await this.$http.delete('goods/' + id.goods_id)

      if (res.meta.status != 200) return this.$message.error('删除失败')

      this.$message.success('删除成功！')

      this.getShopList()
    },
    // 添加商品跳转界面
    getAdd(){
      this.$router.push('/goods/adds')
    }

  },
}
</script>
<style>
</style>